iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

菜雞用 Phaser 拾起童年遊戲 系列 第 21

菜雞用 Phaser 拾起童年遊戲 21

  • 分享至 

  • xImage
  •  

我們來給我們「打磚塊」加一些音效讓他玩起來更舒服吧!!

Photo by bruce mars on Unsplash

聲音設定

跟物理引擎一樣,我們要在 config 裡面設定聲音的引擎。

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  audio: {
    disableWebAudio: true,
  },
  physics: {
    default: "arcade",
    arcade: {
      gravity: {},
      debug: false,
    },
  },
  scene: [menu]
};

載入聲音檔

一樣我們要在有戲裡使用的素材都要載進來,讓我們之後可以調用。

    // 載入音樂素材
    this.load.audio("blockBounce", "./assets/sound/blockBounce.ogg");
    this.load.audio("fall", "./assets/sound/fall.ogg");
    this.load.audio("getProp", "./assets/sound/getProp.ogg");
    this.load.audio("mission", "./assets/sound/mission.ogg");

創建物件

我們一樣要將它創建在我們場景內,跟佈置物件一樣,把他建立進去。

    // 各種音效
    blockBounceSound = this.sound.add("blockBounce");
    fallSound = this.sound.add("fall");
    getPropSound = this.sound.add("getProp");
    // 設定讓他可以循環播放
    missionSound = this.sound.add("mission", { loop: true });

播放音效

接下來我們只要在想播放的地方,執行 play() 的函數,就可以聽到聲音囉!

    // 背景音樂
    missionSound.play();
    ...
    
    
    if (ball.body.y > 600 && !isGameOver) {
      // 球掉落音效
      fallSound.play();
      ...
      
     }


function blockBounce(ball, block) {
  // 打到磚塊的音效
  blockBounceSound.play();
  ...
  
}

function getProp(board, prop) {
  // 獲得道具的音效
  getPropSound.play();
  ...
}

總結

現在我們的遊戲更加豐富了,但是每次輸了都要刷新頁面才能重新來過,最後一個流程設計了,讓我們明天來完成它!

tags: Phaser Game 2020鐵人賽

上一篇
菜雞用 Phaser 拾起童年遊戲 20
下一篇
菜雞用 Phaser 拾起童年遊戲 22
系列文
菜雞用 Phaser 拾起童年遊戲 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言